<template>
  <el-avatar
    fit="cover"
    :src="avatar"
    class="flex-none w-50px h-50px"
    @click="createImageViewer({ urlList: [avatar] })"
  />
  <br />
  <el-tooltip :content="idTips" placement="top">
    <el-text>{{ nickname }}</el-text>
  </el-tooltip>
</template>

<script setup lang="ts">
import { SimpleUserVO } from '@/api/member/user'
import { createImageViewer } from '@/components/ImageViewer'

defineOptions({ name: 'MemberUserSimple' })

const props = defineProps<{
  user: SimpleUserVO | undefined | null
}>()

const avatar = computed(() => (props.user ? props.user.avatar || '' : ''))
const nickname = computed(() => (props.user ? props.user.nickname || '' : ''))
const idTips = computed(() => (props.user ? '用户编号：' + props.user.id : '用户信息为空'))
</script>
